<template>
<div>
  <van-row @click="openModal">
    <van-col span="6">
      <img :src="avatar" alt="">
    </van-col>
    <van-col span="10">{{nickName}}</van-col>
    <van-col span="8"><van-icon name="arrow"></van-icon></van-col>
  </van-row>

  <div class="login_modal"  v-if="showModal">
    <div class="login_modal_form" @click="closeModal"></div>
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
  </div>
</div>
</template>

<script>
import {goLogin} from "@/request/api";

export default {
name: "User",
  data(){
  return{
    avatar:require('@/assets/logo.png'),
    username:'',
    password:'',
    showModal:true,
    nickName:'点击登录',
  }
  },
  methods:{
    async onSubmit(){
      const {data:res} = await goLogin({
        'username':this.username,
        'pwd':this.password
      })
      if(res.errno ==0){
        let {token,userInfo} = res.data;
        localStorage.setItem('token',token);
        localStorage.setItem('userInfo',JSON.stringify(userInfo));
        this.$toast.success('登录成功')
        this.nickName = userInfo.nickname;
        this.avatar = userInfo.avatar;
        this.showModal = false;
      }
      console.log(res)

    },
    closeModal() {
      this.showModal = false;
    },
    openModal(){
      let token = localStorage.getItem('token')
      if(token){
        return;
      }
      this.showModal = true;
    },
  },
  created(){
    let token = localStorage.getItem('token');
    console.log(token)
    if(token){
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      console.log(userInfo)
      this.nickName = userInfo.nickname;
      this.avatar = userInfo.avatar;
      this.showModal = false;
    }
  }
}
</script>

<style lang="less" scoped>
.van-row {
  padding: .2rem 4%;
  background-color: #333;
  color: whitesmoke;
  .van-col {
    //border-right: 1px solid #fff;
    line-height: .8rem;
    font-size: .15rem;
    &:last-child {
      text-align: right;
    }
  }
  img {
    width: .8rem;
    height: .8rem;
    //border-radius: 50%;
    display: block;
  }

}
.login_modal {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  .login_modal_form {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  }
  .van-form {
    width: 90%;
    //margin:40vh auto 0;
    position: absolute;
    top: 40vh;
    left: 5%;
    //margin-left: -45%;
    padding: .1rem;
    box-sizing: border-box;
    background-color: #fff;
  }
}

</style>